<template>
    <!-- 通过v-bind="$attrs" v-on="$listeners"，把父组件传的属性全部绑定到子组件上，保证了api和el-table一致 -->
    <el-table ref="table" style="width: 100%" v-bind="$attrs" stripe v-on="$listeners">
        <template v-for="(item, index) in columns">
            <!-- 如果有嵌套子项，循环显示 -->
            <el-table-column v-if="item.children" :key="index" v-bind="item.attrs">
                <div v-for="m in item.children" :key="m.attrs.prop">
                    <!-- 有自定义标题的，在路面检测管理里面，标题带平方米上标 -->
                    <!-- 注意：json配置项第一个会跑到最后一个，要注意换下位置 -->
                    <el-table-column v-if="m.headerSlot" :key="m.attrs.prop" v-bind="m.attrs">
                        <template slot="header" slot-scope="scope">
                            <slot :scope="scope" :name="m.headerSlot" />
                        </template>
                    </el-table-column>
                    <!-- 如果没自定义表头的，正常渲染 -->
                    <el-table-column v-else :key="m.attrs.prop" v-bind="m.attrs"></el-table-column>
                </div>
            </el-table-column>

            <!-- 头部和内容都要自定义的走这里 -->
            <el-table-column v-else-if="item.slot && item.headerSlot" :key="index" v-bind="item.attrs">
                <template slot="header" slot-scope="scope">
                    <slot :scope="scope" :name="item.headerSlot" v-bind="item.attrs" />
                </template>
                <!-- vue2.6及以上版本，具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope。
                但考虑到element-ui官方文档依然使用的是slot-scope，这里不做更改。-->
                <template slot-scope="scope">
                    <!-- :scope是绑定的动态属性，可以起任意喜欢的名字，但要注意在父组件中获取数据时key要对应 -->
                    <slot :scope="scope" :name="item.slot" />
                </template>
            </el-table-column>
            
            <el-table-column v-else-if="item.slot" :key="index" v-bind="item.attrs">
                <template slot-scope="scope">
                    <slot :scope="scope" :name="item.slot" />
                </template>
            </el-table-column>
            <el-table-column v-else-if="item.headerSlot" :key="item.attrs.prop" v-bind="item.attrs">
                <template slot="header" slot-scope="scope">
                    <slot :scope="scope" :name="item.headerSlot" v-bind="item.attrs" />
                </template>
            </el-table-column>
            <el-table-column v-else :key="index" v-bind="item.attrs" />
        </template>

        <!-- 考虑到v-for和v-if同时使用存在性能问题，这里直接使用computed把需要循环的数据过滤一遍，去除v-if，但是会有顺序问题，这种优化不可取 -->
        <!-- <el-table-column v-for="item in normalColumns" :key="item.id" v-bind="item.attrs"></el-table-column>
        <el-table-column v-for="item in slotColumns" :key="item.id" v-bind="item.attrs">
            <template slot-scope="scope">
                <slot :scope="scope" :name="item.slot"></slot>
            </template>
        </el-table-column> -->
    </el-table>
</template>

<script>
export default {
    name: 'BaseTable',
    props: {
        columns: {
            type: Array,
            default: () => []
        }
    }
    // computed: {
    //     // 获取普通的columns数据
    //     normalColumns() {
    //         return this.columns.filter(item => !item.slot)
    //     },
    //     // 获取是插槽的columns数据
    //     slotColumns() {
    //         return this.columns.filter(item => item.slot)
    //     }
    // },
}
</script>

<style></style>
